<template>
  <div>
    <div class="sale-personal-title div-align-justify-center">
      <div class="sale-personal-title-item div-align-justify-center"
           :class="tab === reportPerformance.month ? 'sale-personal-title-item-active' : '' "
           @click="tab = reportPerformance.month;key.reportPerformance.month = new Date().getTime();"
      >每月业绩
      </div>
      <div class="sale-personal-title-item div-align-justify-center"
           :class="tab === reportPerformance.total ? 'sale-personal-title-item-active' : '' "
           @click="tab = reportPerformance.total;key.reportPerformance.total = new Date().getTime();"
      >总业绩
      </div>
    </div>
    <div v-if="tab === reportPerformance.month">
      <report-sale-total :key="key.reportPerformance.month" :type="2" :user-id="userId"></report-sale-total>
    </div>
    <div v-if="tab === reportPerformance.total">
      <report-sale-item :key="key.reportPerformance.total" :item="reportSaleItem" :show-total="true" :order-detail-url="orderDetailUrl"></report-sale-item>
    </div>
  </div>
</template>

<script>
import ReportSaleTotal from '@/components/report/sale/total'
import ReportSaleItem from '@/components/report/sale/item'
export default {
  components: {
    ReportSaleTotal,
    ReportSaleItem,
  },
  props: {
    userId: { type: String, default: () => ('') },
  },
  name: "ProfileReport",
  data() {
    return {
      orderDetailUrl: this.GLOBAL.pathSetting.report.orderDetail,
      tab: this.GLOBAL.listItemType.report.performance.month,
      reportPerformance: this.GLOBAL.listItemType.report.performance,
      performanceListType: this.GLOBAL.listType.performance,
      reportSaleItem: {
        title: '',
        fieldValue: [],
        active: false
      },
      key: {
        reportPerformance: {
          month: new Date().getTime(),
          total: new Date().getTime(),
        }
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.sale-personal-title {
  height: 46px;
}

.sale-personal-title-item {
  height: 22px;
  padding: 2px 8px;
  margin: 0 16px;
  background: #F5F5F5;
  color: #999999;
  border-radius: 8px;
}

.sale-personal-title-item-active {
  background: #FFF5CC;
  color: #242424;
}
</style>
<style>
</style>